<template>
	<view>
		<uni-nav-bar :border="false" left-icon="left" rightText="提交" title="个人信息修改" @clickLeft="goback"
			@clickRight="submit('baseForm')" />
		<uni-card class="card">
			<image class="avater" :src="Url" mode="" @click="Avater"></image>
			<view>修改你的头像</view>
		</uni-card>
		<uni-card class="card">
			<uni-forms ref="baseForm" :rules="rules" :modelValue="baseFormData">
				<uni-forms-item label="姓名" required name="name">
					<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="性别">
					<uni-data-checkbox v-model="baseFormData.sex" :localdata="sexs" />
				</uni-forms-item>

			</uni-forms>
		</uni-card>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseFormData: {
					name: '',
					sex: 2,
				},
				sexs: [{
					text: '男',
					value: 0
				}, {
					text: '女',
					value: 1
				}, {
					text: '保密',
					value: 2
				}],
				// 校验规则
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					}
				},
				Url: "http://tmp/b1CHzweCuekvc92cdbe4014406f87abe09a91a8d8bc5.png"
			};
		},
		methods: {
			submit(ref) {
				this.$refs[ref].validate().then(() => {
					console.log('success', this.baseFormData);
					uni.showToast({
						title: `校验通过`
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
			goback() {
				uni.navigateTo({
					url: "/pages/setting/setting"
				})
			},
			Avater() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.Url = res.tempFilePaths[0];
						// uni.saveFile({
						// 	tempFilePath: res.tempFilePaths[0],
						// 	success: (res) =>  {
						// this.Url = res.savedFilePath;
						// 	}
						// });
					},
					fail(err) {
						console.log(err);
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.card {
		text-align: center;
	}

	.avater {
		border-radius: 50%;
		width: 100px;
		height: 100px;
	}
</style>